<template>
  <div class="login-container">
    <el-card class="login-box">
      <div class="login-header">
        <h2>欢迎登录系统</h2>
        <p>
          或 <router-link to="/register">注册新账户</router-link>
        </p>
      </div>
      
      <el-form 
        ref="loginForm"
        :model="form"
        :rules="rules"
        @submit.native.prevent="handleLogin"
        class="login-form"
      >
        <el-form-item prop="username">
          <el-input
            v-model="form.username"
            prefix-icon="el-icon-user"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        
        <el-form-item prop="password">
          <el-input
            v-model="form.password"
            prefix-icon="el-icon-lock"
            type="password"
            placeholder="请输入密码"
            show-password
          ></el-input>
        </el-form-item>
        
        <div class="form-options">
          <el-checkbox v-model="form.remember">记住我</el-checkbox>
          <router-link to="/forgot-password" class="forgot-password">
            忘记密码?
          </router-link>
        </div>
        
        <el-button
          type="primary"
          native-type="submit"
          class="login-button"
          :loading="loading"
        >
          {{ loading ? '登录中...' : '登录' }}
        </el-button>
      </el-form>
      
      <div class="social-login">
        <div class="divider">
          <span>其他登录方式</span>
        </div>
        
        <div class="social-buttons">
          <el-button
            circle
            class="social-button github"
            @click="loginWith('github')"
          >
            <i class="iconfont icon-github"></i>
          </el-button>
          <el-button
            circle
            class="social-button google"
            @click="loginWith('google')"
          >
            <i class="iconfont icon-google"></i>
          </el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      form: {
        username: '',
        password: '',
        remember: false
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
        ]
      },
      loading: false
    }
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          
          // 这里替换为实际的登录API调用
          this.$store.dispatch('user/login', this.form)
            .then(() => {
              this.$router.push('/dashboard')
              this.$message.success('登录成功')
            })
            .catch(error => {
              this.$message.error(error.message || '登录失败')
            })
            .finally(() => {
              this.loading = false
            })
        }
      })
    },
    loginWith(provider) {
      window.location.href = `/api/auth/${provider}`
    }
  }
}
</script>

<style lang="less" scoped>
// @import "@/styles/variables.less";

.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f7fa;
  // background-image: url('./assets/login.png');
  background-size: cover;
  padding: 20px;
  
  .login-box {
    width: 100%;
    max-width: 420px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    
    .login-header {
      text-align: center;
      margin-bottom: 30px;
      
      h2 {
        font-size: 24px;
        color:#303133;
        margin-bottom: 10px;
      }
      
      p {
        color: #909399;
        font-size: 14px;
        
        a {
          color: #409EFF;
          text-decoration: none;
          
          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
    
    .login-form {
      margin-bottom: 20px;
      
      /deep/ .el-input__inner {
        height: 48px;
        line-height: 48px;
      }
    }
    
    .form-options {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      font-size: 14px;
      
      .forgot-password {
        color:#409EFF;
        text-decoration: none;
        
        &:hover {
          text-decoration: underline;
        }
      }
    }
    
    .login-button {
      width: 100%;
      height: 48px;
      font-size: 16px;
    }
    
    .social-login {
      margin-top: 30px;
      
      .divider {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        color: #C0C4CC;
        font-size: 14px;
        
        &::before,
        &::after {
          content: "";
          flex: 1;
          border-bottom: 1px solid #DCDFE6;
        }
        
        span {
          padding: 0 10px;
        }
      }
      
      .social-buttons {
        display: flex;
        justify-content: center;
        gap: 15px;
        
        .social-button {
          width: 40px;
          height: 40px;
          padding: 0;
          border-color: #DCDFE6;
          background: white;
          
          &:hover {
            background:#f5f7fa;
            
            i {
              color: inherit;
            }
          }
          
          i {
            font-size: 18px;
          }
        }
        
        .github:hover {
          color: #333;
          border-color: #333;
        }
        
        .google:hover {
          color: #db4437;
          border-color: #db4437;
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .login-container {
    padding: 10px;
    
    .login-box {
      padding: 20px;
      
      .login-header h2 {
        font-size: 20px;
      }
    }
  }
}
</style>